<template>
  <div ref="bar" style="width:100%; height:100%;"></div>
</template>

<script>
import * as echarts from "echarts";
    export default {
        name: "",
        props: {// 接受父组件的值
          detailData:{
            type:Object,
          },
        },
        data(){
            return{
              chart: null,
              seriesData1: {},
            }
        },
        watch: {
          detailData: {
            handler(val, old) {
              this.seriesData1 = this.detailData;
              this.initChart();
              //console.log(val+"监听数据");
            },
            deep: true,
          },
        },
        mounted() {
          setTimeout(() => {
            this.$nextTick(() => {
              this.initChart();
            });
          }, 500);

        },
        created() {
          this.seriesData1 = this.detailData;
        },
        methods:{
          initChart(){
            let ref = this.$refs.bar;
            let xAxisData =[];
                xAxisData = this.seriesData1.mc.split(',');
                xAxisData.forEach((item, index) => {})
            let yAxisData= [];
                yAxisData = this.seriesData1.dfx.split(',');
                yAxisData.forEach((item, index) => {})

            if (ref && ref !== undefined) {
              this.chart = echarts.init(ref);

              let XData = xAxisData
              let valueData = yAxisData
              var option;
              option = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    show: true,
                    status: 'shadow',
                    z: -1,
                    shadowStyle: {
                      color: '#E6F7FF',
                    },
                    type: 'shadow'
                  }
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '11%',
                  containLabel: true
                },
                xAxis: [
                  {
                    position: 'bottom',
                    type: 'category',
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: '#ECF1F6'
                      }
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      show: true,
                      rotate: 0,
                      fontSize: 12,
                      color: 'rgba(0, 0, 0, 0.72)'
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: ['#ECF1F6', '#ECF1F6'],
                        width: 0,
                        type: 'dashed'
                      }
                    },
                    gridIndex: 0,
                    data: XData,
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    position: 'left',
                    minInterval: 120,
                    // maxInterval: 5,
                    axisLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      show: true,
                      rotate: 0,
                      fontSize: 12,
                      color: 'rgba(0, 0, 0, 0.72)',
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: ['#ECF1F6', '#ECF1F6'],
                        width: 1,
                        type: 'solid'
                      }
                    },
                  }
                ],
                "dataZoom": [{
                  "show": true,
                  "height": 8,
                  "xAxisIndex": [
                    0
                  ],
                  bottom: 30,
                  "start": 10,
                  "end": 90,
                  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                  handleSize: '160%',
                  handleStyle:{
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#fff',
                    },
                      {
                        offset: 1,
                        color: '#F0F5FA',
                      },
                    ]),
                    borderColor: '#D1DCED'
                  },
                  textStyle:{
                    color:"#333",
                    fontSize: 14,
                    zlevel: 10
                  },
                  borderColor: 'RGBA(221, 233, 242, 1)',
                  backgroundColor: 'RGBA(221, 233, 242, 1)'
                }, {
                  "type": "inside",
                  "show": true,
                  "height": 5,
                  "start": 1,
                  "end": 35
                }],
                series: [
                  {
                    name: '测评统计表',
                    type: 'bar',
                    data: valueData,
                    label: {
                      normal: {
                        show: true,
                        position: "top",
                        textStyle: {
                          color: "rgba(80, 165, 230, 1)",
                          fontSize:18
                        }
                      }
                    },
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: "rgba(71, 153, 236, 1)"
                        },
                          {
                            offset: 1,
                            color: "rgba(82, 168, 229, 1)"
                          }
                        ])
                      }
                    },
                    barMaxWidth: '25%',
                  }
                ]
              };
              option && this.chart.setOption(option);

            }
          },
        },
    };
</script>

<style scoped>
/deep/[data-v-37c029ad] .el-form-item--small.el-form-item{margin-top: 0!important;}
/deep/.el-avatar{background: #fff!important;display: flex;justify-content: center}
.userBoxShadow{
  border: 4px solid #fff;
  -webkit-box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  margin-right: 25px;border-radius: 50%;
}
</style>
